<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-list
      v-model="bonusLoading"
      :finished="bonusFinished"
      finished-text="没有更多了"
      @load="onBonusLoad"
    >
      <van-cell-group title="积分赠送明细">
        <van-swipe-cell v-for="item in bonus" :key="item.id">
          <van-cell
            :title="item.customer_name"
            :value="item.score"
            :label="item.update_time"
            :key="item.id"
          >
            <template #title>
              <span>{{ item.customer_name }}</span>
              <span
                v-if="item.status == 0 && item.score + item.unused_score > 0"
              >
                <van-tag type="danger">{{ item.status_name }}</van-tag></span
              >
            </template>
            <template>
              <span>{{ item.score }}</span>
              <span v-if="item.unused_score != 0">
                +
                <van-tag type="warning">{{ item.unused_score }}</van-tag></span
              >
            </template>
          </van-cell>
          <template #right v-if="item.cancel_flag && item.status === 1">
            <van-button
              square
              text="取消赠送"
              class="swipe-cell-button"
              type="danger"
              @click="onPointCancel(item.id)"
            />
          </template>
        </van-swipe-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";
import { getWxBonusPointList, WxBonusPointCancel } from "@/api/member";

export default {
  name: "Bill",
  components: {
    NavBar,
  },
  // computed: {
  //   ...mapGetters(["retailer_name"]),
  // },
  props: ["retailer_id"],
  data() {
    return {
      title: this.$route.meta.title,
      bonusLoading: false,
      bonusFinished: false,

      bonus: [],

      bonusQuery: {
        page: 1,
        page_size: 10,
        retailer_id: null,
        employee_openid: localStorage.getItem("openid"),
      },
    };
  },
  mounted() {},
  methods: {
    onBonusLoad() {
      this.getBonusList();
    },

    getBonusList() {
      this.bonusQuery.retailer_id = this.retailer_id;
      getWxBonusPointList(this.bonusQuery)
        .then((res) => {
          if (res.data.results.length === 0) {
            this.bonus = []; // 清空数组
            this.bonusFinished = true; // 停止加载
          }
          this.bonusQuery.page = res.data.page;
          this.bonus.push(...res.data.results);
          this.bonusLoading = false;

          if (this.bonus.length >= res.data.count) {
            this.bonusFinished = true; // 结束加载状态
          }
        })
        .catch(() => {
          this.$toast("获取数据失败!!");
        });
    },
    onPointCancel(id) {
      console.log("point:", id);
      const data = {
        bp_id: id,
        retailer_id: this.retailer_id,
      };
      WxBonusPointCancel(data)
        .then((res) => {
          console.log(res);
          this.$notify({
            type: "success",
            message: "取消积分成功!",
          });
          this.bonus = [];
          this.onBonusLoad();
        })
        .catch((error) => {
          console.log(error);
          this.$notify({
            type: "danger",
            message: "取消积分失败!",
          });
        });
    },
  },
};
</script>

<style  scoped>
</style>